[ワークショップ]「テーマパーク用のサーバーレス Web アプリケーションの構築 」に参加してテーマパークのサーバーレスWebアプリケーションを作成してみた #AWSreInvent #SVS201

re:Invent2023で開催された「Building a serverless web application for a theme park」のワークショップに参加したのでレポートします。

概要

In this workshop, learn how to build a complete serverless web application for a popular theme park called Innovator Island. The theme park is rolling out a mobile app that provides thousands of visitors with wait times, photo opportunities, notification alerts, and language translation. Get hands-on experience building a scalable serverless application with a single-page application frontend that delivers a feature-rich user experience. You must bring your laptop to participate.

(機械翻訳)このワークショップでは、Innovator Islandと呼ばれる人気テーマパークのための完全なサーバーレスWebアプリケーションを構築する方法を学びます。このテーマパークは、待ち時間、写真撮影、通知アラート、言語翻訳を何千人もの来場者に提供するモバイルアプリを展開しています。機能豊富なユーザー体験を提供するシングル・ページのアプリケーション・フロントエンドで、スケーラブルなサーバーレス・アプリケーションを構築する実習を体験してください。参加にはノートパソコンが必要です。

シナリオ

「ちょっとした問題」で開発チームが去ってしまったが、テーマパークはオープン初日。開園時間まで残り数時間しかない状況です。 サーバーレスサービスを使ってアプリケーションを短い時間でデプロイしましょう。

ワークショップの内容

利用サービス一覧はこちら。サーバーレス系を幅広く使って Web アプリケーションを構築していきます。

こんなロゴも用意されていてテンションを上げながら作業に入りました。

開発環境としては Cloud9 を利用します。デプロイするコードは GitHub 上に用意されており、基本的には clone して修正して使っていきました。

Module1 アプリケーションをデプロイする

事前準備として GitHub からのコード取得とフロントエンド・バックエンドのデプロイをします。

フロントエンド

フロントエンドは Vue.js で作成されており、このコードは既に準備されています。これを Amplify を使ってホストします。

CodeCommit に用意したリポジトリと連携させてデプロイしたところ、以下の Web アプリを開くことができました。数クリックでデプロイが完了してしまったのであっという間です。

バックエンド

バックエンドにはSAMを利用します。用意されたテンプレート 2 つをデプロイすると API Gateway、Lambda、DynamoDB などが作成されます。

Module2 リアルタイムの乗車待ち時間

Lambda を作成し、トリガーを SNS に設定することでリアルタイムの情報を DynamoDB テーブルと IoT ピックに送ります。

DynamoDB のテーブルに追加された情報は Web アプリケーションが最初に読み込む際に参照されます。IoT トピックはバックエンドからフロントエンドへの経路となっており、フロントエンドで処理を行います。

ワークショップとしては、Lambda の作成と各パラメータの設定(Cognito の poolid、IoT topic エンドポイント名、リージョン)をしました。

Config ファイルにパラメータを設定しデプロイが完了すると、各アトラクションの待ち時間が表示されるようになりました！

これでお客さんも、どのアトラクションに乗るか悩まずに楽しめそうです。

Module3 写真処理

テーマパークににきたらもちろんその写真も欲しいですよね。お客さんは写真が大好きなので、この Web アプリを使って写真を処理できるようにしていきます。

実装としては S3 と Lambda を使用しました。

こちらの楽しそうなお客さんの写真を使って処理をテストしていきます。

クロマキー処理

クロマキーとは Wiki によると以下のような処理のようです。背景を消して、人だけを切り抜いたりする技術ですね。

クロマキー（Chroma key）もしくはクロマキー合成（クロマキーごうせい）は、キーイングの一種。映像の一部から特定の色の成分を分離し、そこに別の映像を合成する技術

参考:クロマキー - Wikipedia

この処理を Lambda で実装していきます。お客さんが写真をアップロードする S3 バケットをトリガーに Lambda を実装しました。

この処理を実装すると、背景のグリーン部分がなくなる処理まで完了です。

写真の合成

クロマキー処理を行なった後は合成処理を行います。テーマパークに来た感じの写真に背景を合成しましょう。

先ほどは手動で Lambda をデプロイしましたが、今回は SAM で S3 バケットと Lambda をデプロイしました。手動で作成した時と比べて１コマンドでデプロイが完了するので IaC のありがたみを感じます。

Lambda の設定が完了したら、S3 バケットに再度画像をアップロードしてテストしました。

最終的に背景が合成された写真は S3 バケットにアップロードされ、楽しかった思い出が残る写真になりましたね。いい感じです。

後処理

処理が終わった写真をフロントエンド側に連携します。後処理用の Lambda を作成し、用意されているコードでデプロイします。

この実装を追加すると写真がアップロード時に、Web アプリに通知が届きギャラリーとして見られるようになります。

なんとか開園前の 2 時間で無事 Web アプリケーションをデプロイできました。

おわりに

「Building a serverless web application for a theme park」のワークショップレポートをお送りしました。

セッションを通してストーリがあったため、実装の流れが分かりやすく楽しんで学ぶことができました。

デプロイも Amplify と SAM を活用しているため、サーバーレスに慣れていない人でも簡単に実装できます。特に Amplify のデプロイ体験はスムーズでよかったので、今後試していきたいと思います。